<template>
	<div>
		<el-container style="margin-left: 120px; margin-right: 120px;background-color: #EEF6F9; margin-top: 40px; ">
			<el-header id="header" style="height: 60px; text-align: center;">
				<span style="line-height: 60px;">燕 大 科 技</span>
			</el-header>
			<el-container>
				<el-aside id="aside" style="width: 800px;">
					<template>
					  <el-carousel indicator-position="none" :interval="3000" height="500px" >
					    <el-carousel-item v-for="item in imgurl" :key="item">
					      	<img :src="item.route" style="width:100%;height: 100%;" />
					    </el-carousel-item>
					  </el-carousel>
					</template>
				</el-aside>
				<el-main>
					<div style="margin: 0 0 0 40px; text-align: left; background-color:#FFFBBD; height: 40px;line-height: 40px;
						color: #cf9235;">
						<i class="el-icon-warning-outline"></i>
						仅供医院相关人员使用
					</div>
					<el-container id="main">
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm" style="margin: 40px 30px 0 0;">
							<el-form-item prop="account">
								<span slot="label">
									<span class="span-box">
										<i class="el-icon-user"></i>
										<span> 账 号: </span>
									</span>
								</span>
								<el-input v-model="ruleForm.account" placeholder="请输入您的账号"></el-input>
							</el-form-item>
							<el-form-item prop="pass">
								<span slot="label">
									<span class="span-box">
										<i class="el-icon-key"></i>
										<span> 密 码: </span>
									</span>
								</span>
								<el-input type="password" v-model="ruleForm.pass" placeholder="请输入您的密码"
									autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item prop="position">
								<span slot="label">
									<span class="span-box">
										<i class="el-icon-s-check"></i>
										<span> 岗 位: </span>
									</span>
								</span>
								<el-select v-model="ruleForm.position" placeholder="请选择您的岗位">
									<el-option label="管理人员" value="manager"></el-option>
									<el-option label="挂号人员" value="Register"></el-option>
									<el-option label="医生" value="doctor"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-container>
									<el-button class="myButton" type="primary" @click="submitForm('ruleForm')">提交
									</el-button>
									<el-button class="myButton" @click="resetForm('ruleForm')">重置</el-button>
								</el-container>
								
							</el-form-item>
						</el-form>
					</el-container>
				</el-main>
			</el-container>
			<el-footer id="footer">
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {getRequest} from '../../publicMethods/http.js'
	export default {
		data() {
			//对账号、密码进行校验
			var checkAccount = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('账号不能为空'));
				}
			};
			//2 
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			return {
				//轮播图路径
				imgurl:[
					{route:'/images/ysu.jpeg'},
					{route:'/images/ysu4.jpg'},
					{route:"/images/ysu2.jpg"},
					{route:"/images/ysu3.jpg"}],
				//表格对象
				ruleForm: {
					account: '',
					pass: '',
					position: ''
				},
				//规则对象
				rules: {
					account: [{
						validator: checkAccount,
						trigger: 'blur' //失去焦点时调用函数
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					position: [{

					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				let url = '/test.json';
				getRequest(url).then(resp => {
					if (resp.status == 200) {
						alert("111");
					}
				});
			}
		}
	}
</script>

<style scoped="scoped">
	#main {
		margin: 60px 40px 40px 70px;
		border-radius: 20px;
		align-self: center;
		background-color: white;
		box-shadow: 0 0 3px white,
			0 0 6px white,
			0 0 9px white,
			0 0 12px white;
		transition: all 2s linear;
	}

	#main:hover {
		background: rgba(85, 170, 255, 0.0001);
		box-shadow: 0 0 3px skyblue,
			0 0 6px whitesmoke,
			0 0 9px white,
			0 0 12px white;
		transition: all 1s linear;
	}

	#header {
		color: white;
		font-size: 20px;
		border-radius: 5px 5px 0px 0px;
		background-color: #409EFF;
	}

	#footer {
		color: white;
		border-radius: 0px 0px 5px 5px;
		background-color: #409EFF;
	}

	
	#aside {
		margin-top: 20px;
		margin-bottom: 20px;
		height: 500px;
	}
	.myButton {
		width: 100px;
		border-width: 1px;
		border-color: rgba(85, 170, 255, 0.7);
		background-color: white !important;
		color: #000000 !important;
	}

	.myButton:hover {
		text-transform: uppercase;
		letter-spacing: 4px;
		background: rgba(85, 170, 255, 1);
		box-shadow: 0 0 1px black,
			0 0 2px white,
			0 0 4px white,
			0 0 6px black;
		transition: all 0.2s linear;
	}
</style>
